<template>
	<view class="coupon-detail">
		<!-- 优惠券卡片 -->
		<view class="coupon-card" :class="{ disabled: couponInfo.status === 2 || couponInfo.status === 3 }">
			<!-- 状态指示器 -->
			<view class="status-indicator" v-if="couponInfo.status === 2">
				<text class="indicator-text">已使用</text>
			</view>
			<view class="status-indicator expired" v-if="couponInfo.status === 3">
				<text class="indicator-text">已过期</text>
			</view>
			<view class="coupon-left">
				<view class="coupon-amount">
					<text class="amount-symbol">¥</text>
					<text class="amount-value">{{ couponInfo.minus }}</text>
				</view>
				<view class="coupon-condition">
					满{{ couponInfo.fullMoney }}可用
				</view>
			</view>
			<view class="coupon-right">
				<view class="coupon-name">{{ couponInfo.name }}</view>
				<view class="coupon-desc">{{ couponInfo.details }}</view>
				<view class="coupon-time">
					有效期：{{ formatTime(couponInfo.startTime) }} - {{ formatTime(couponInfo.endTime) }}
				</view>
				<view class="coupon-status">
					<text v-if="couponInfo.status === 1" class="status-valid">可使用</text>
					<text v-else-if="couponInfo.status === 2" class="status-used">已使用</text>
					<text v-else class="status-expired">已过期</text>
				</view>
			</view>
		</view>
		
		<!-- 使用说明 -->
		<view class="usage-section">
			<view class="section-title">使用说明</view>
			<view class="usage-content">
				<view class="usage-item">
					<text class="item-dot">•</text>
					<text class="item-text">订单金额满{{ couponInfo.fullMoney }}元可使用</text>
				</view>
				<view class="usage-item">
					<text class="item-dot">•</text>
					<text class="item-text">单笔订单只能使用一张优惠券</text>
				</view>
				<view class="usage-item">
					<text class="item-dot">•</text>
					<text class="item-text">优惠券不可与其他优惠活动同时使用</text>
				</view>
				<view class="usage-item">
					<text class="item-dot">•</text>
					<text class="item-text">优惠券一旦使用，不可退回</text>
				</view>
				<view class="usage-item">
					<text class="item-dot">•</text>
					<text class="item-text">请在有效期内使用，过期自动失效</text>
				</view>
				<view class="usage-item">
					<text class="item-dot">•</text>
					<text class="item-text">部分商品可能不支持优惠券使用</text>
				</view>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-buttons" v-if="couponInfo.status === 1">
			<button class="btn-use" @click="handleUseCoupon">立即使用</button>
			<button class="btn-delete" @click="handleDeleteCoupon">删除优惠券</button>
		</view>
		
		<!-- 已使用/已过期状态 -->
		<view class="status-info" v-else>
			<view class="status-text">
				{{ couponInfo.status === 2 ? '该优惠券已使用' : '该优惠券已过期' }}
			</view>
			<button class="btn-delete" @click="handleDeleteCoupon">删除优惠券</button>
		</view>
	</view>
</template>

<script>
	import { getCouponDetail, deleteCoupon } from '@/api/coupon'
	
	export default {
		data() {
			return {
				couponId: '',
				couponInfo: {}
			};
		},
		onLoad(options) {
			if (options.id) {
				this.couponId = options.id;
				// 临时使用模拟数据
				this.loadMockData();
				// this.getCouponDetail();
			}
		},
		methods: {
			// 加载模拟数据
			loadMockData() {
				// 根据ID生成不同的优惠券数据
				const couponTypes = [
					{
						name: '新人专享券',
						details: '新用户专享优惠券，全场通用，限时优惠',
						minus: 10,
						fullMoney: 50
					},
					{
						name: '满减优惠券',
						details: '满100减20，限时优惠，全场商品可用',
						minus: 20,
						fullMoney: 100
					},
					{
						name: '生日特惠券',
						details: '生日当月专享优惠，全场商品8折优惠',
						minus: 30,
						fullMoney: 150
					},
					{
						name: '会员专享券',
						details: 'VIP会员专享优惠券，全场商品可用',
						minus: 15,
						fullMoney: 80
					},
					{
						name: '限时抢购券',
						details: '限时抢购活动优惠券，指定商品可用',
						minus: 25,
						fullMoney: 120
					}
				];
				
				const couponIndex = parseInt(this.couponId) % couponTypes.length;
				const selectedCoupon = couponTypes[couponIndex];
				
				// 根据ID生成不同的有效期
				const now = new Date();
				const startDate = new Date(now.getFullYear(), now.getMonth() - 1, 1);
				const endDate = new Date(now.getFullYear(), now.getMonth() + 2, 28);
				
				const mockData = {
					id: this.couponId,
					name: selectedCoupon.name,
					details: selectedCoupon.details,
					minus: selectedCoupon.minus,
					fullMoney: selectedCoupon.fullMoney,
					startTime: startDate.toISOString(),
					endTime: endDate.toISOString(),
					status: parseInt(this.couponId) % 3 + 1 // 根据ID生成不同状态
				};
				
				this.couponInfo = mockData;
			},
			
			// 获取优惠券详情
			async getCouponDetail() {
				try {
					const response = await getCouponDetail(this.couponId);
					
					if (response.code === 200) {
						this.couponInfo = response.data;
					} else {
						uni.showToast({
							title: response.msg || '获取优惠券详情失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取优惠券详情失败:', error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			},
			
			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			},
			
			// 使用优惠券
			handleUseCoupon() {
				uni.showToast({
					title: '跳转到商品页面',
					icon: 'success'
				});
				// 临时提示，等商品页面创建后可以取消注释
				/*
				uni.navigateTo({
					url: '/pages/product/list?couponId=' + this.couponId
				});
				*/
			},
			
			// 删除优惠券
			handleDeleteCoupon() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这张优惠券吗？',
					success: async (res) => {
						if (res.confirm) {
							// 临时使用模拟删除
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
							// 返回上一页
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
							
							// 真实API调用（等后端服务启动后使用）
							/*
							try {
								const response = await deleteCoupon(this.couponId);
								
								if (response.code === 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									});
									// 返回上一页并刷新
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								} else {
									uni.showToast({
										title: response.msg || '删除失败',
										icon: 'none'
									});
								}
							} catch (error) {
								console.error('删除优惠券失败:', error);
								uni.showToast({
									title: '网络错误，请重试',
									icon: 'none'
								});
							}
							*/
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.coupon-detail {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 30rpx;
	
	.coupon-card {
		display: flex;
		background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 40rpx;
		
		.status-indicator {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			background-color: rgba(0, 0, 0, 0.7);
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			z-index: 10;
			
			&.expired {
				background-color: rgba(153, 153, 153, 0.8);
			}
			
			.indicator-text {
				color: #ffffff;
				font-size: 24rpx;
				font-weight: bold;
			}
		}
		
		&.disabled {
			background: linear-gradient(135deg, #ccc 0%, #ddd 100%);
			
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.1);
				z-index: 1;
			}
		}
		
		.coupon-left {
			width: 200rpx;
			background-color: rgba(255, 255, 255, 0.1);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 30rpx 20rpx;
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				right: -10rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 20rpx;
				height: 20rpx;
				background-color: #f5f5f5;
				border-radius: 50%;
			}
			
			.coupon-amount {
				display: flex;
				align-items: baseline;
				
				.amount-symbol {
					font-size: 32rpx;
					color: #ffffff;
					font-weight: bold;
				}
				
				.amount-value {
					font-size: 60rpx;
					color: #ffffff;
					font-weight: bold;
					line-height: 1;
				}
			}
			
			.coupon-condition {
				font-size: 24rpx;
				color: #ffffff;
				margin-top: 10rpx;
				opacity: 0.9;
			}
		}
		
		.coupon-right {
			flex: 1;
			padding: 30rpx;
			background-color: #ffffff;
			
			.coupon-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.coupon-desc {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 15rpx;
				line-height: 1.4;
			}
			
			.coupon-time {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 15rpx;
			}
			
			.coupon-status {
				text-align: right;
				
				.status-valid {
					display: inline-block;
					padding: 8rpx 20rpx;
					background-color: #ff6b35;
					color: #ffffff;
					font-size: 24rpx;
					border-radius: 20rpx;
				}
				
				.status-used {
					display: inline-block;
					padding: 8rpx 20rpx;
					background-color: #ccc;
					color: #ffffff;
					font-size: 24rpx;
					border-radius: 20rpx;
				}
				
				.status-expired {
					display: inline-block;
					padding: 8rpx 20rpx;
					background-color: #999;
					color: #ffffff;
					font-size: 24rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
	
	.usage-section {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.usage-content {
			.usage-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 15rpx;
				
				.item-dot {
					font-size: 28rpx;
					color: #ff6b35;
					margin-right: 10rpx;
					line-height: 1.4;
				}
				
				.item-text {
					font-size: 28rpx;
					color: #666;
					line-height: 1.4;
					flex: 1;
				}
			}
		}
	}
	
	.action-buttons {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		
		.btn-use {
			background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
			color: #ffffff;
			border: none;
			border-radius: 50rpx;
			padding: 25rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
		
		.btn-delete {
			background-color: #ffffff;
			color: #ff6b35;
			border: 2rpx solid #ff6b35;
			border-radius: 50rpx;
			padding: 25rpx;
			font-size: 32rpx;
		}
	}
	
	.status-info {
		text-align: center;
		
		.status-text {
			font-size: 28rpx;
			color: #999;
			margin-bottom: 30rpx;
		}
		
		.btn-delete {
			background-color: #ffffff;
			color: #ff6b35;
			border: 2rpx solid #ff6b35;
			border-radius: 50rpx;
			padding: 25rpx;
			font-size: 32rpx;
			width: 100%;
		}
	}
}
</style> 